<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(回收站)"></head>
<body class="">
<div class="page">
	<div class="flex-fill">
		<div th:replace="public/menu :: menu(1)"></div>
		<div class="my-3 my-md-5">
			<div class="container">
				<div class="row">
					<div class="col-sm-3">
						<h3 class="mb-4"><p class="lh-1">文章</p></h3>
						<div>
							<div class="list-group list-group-transparent mb-0">
								<a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>新增文章
								</a>
								<a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/publish}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>已发布
								</a>
								<a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/draft}">
									<span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
									</span>草稿箱
								</a>
								<a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/article/trash}">
                                    <span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                    </span>回收箱
								</a>
							</div>
						</div>
					</div>
					<div class="col-sm-9">
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">回收站</h3>
								<div class="alert alert-success col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-success">
									还原成功
									<a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
								</div>
								<div class="alert alert-error col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-fail">
									还原失败，请稍后重试
									<a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
								</div>
							</div>
							<div class="table-responsive">
								<table class="table card-table table-hover text-nowrap">
									<thead>
									<tr>
										<th class="w-1">ID</th>
										<th>标题</th>
										<th>标签</th>
										<th>发表时间</th>
										<th>剩余保存时间</th>
										<th>操作</th>
									</tr>
									</thead>
									<tbody>
									<tr th:each="item : ${page.list}">
										<td><span class="text-muted" th:text="${item.id}">001401</span></td>
										<td><a href="javascript:void(0)" class="text-inherit" th:text="${item.title}"
											   onclick="showDetail(this)">Java设计模式</a>
										</td>
										<td>
											<span class="tag tag-warning" th:each="tag : ${item.tags}" th:utext="${tag.name}"></span>
										</td>
										<td th:text="${#dates.format(item.updateTime, 'yyyy-MM-dd')}">
											2020-02-29
										</td>
										<td>[[${item.remainTime}]]天</td>
										<td>
											<a class="text" href="#" th:attr="articleId=${item.id}" onclick="changeState(this)">
												还原
											</a>
										</td>
									</tr>
									</tbody>

								</table>
							</div>
							<div class="card-body" th:if="${page.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${page.totalNum}]]&nbsp;</b>
                                    篇文章，共<b class="text-red">&nbsp;[[${page.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${page.page}]]&nbsp;</b>页</span>
								<ul class="pagination center float-right">
									<li class="page-item" th:classappend="${page.totalPage == 0 || page.page == 1} ? 'disabled' : ''">
										<a class="page-link" href="#" tabindex="-1" th:href="'/admin/article/trash?page=' + ${page.page - 1}">
											<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
												<path stroke="none" d="M0 0h24v24H0z"></path>
												<polyline points="15 6 9 12 15 18"></polyline>
											</svg>
										</a>
									</li>
									<li class="page-item" th:classappend="${page.totalPage == 0 || page.page == page.totalPage} ? 'disabled' : ''">
										<a class="page-link" href="#" th:href="'/admin/article/trash?page=' + ${page.page + 1}">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
												 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
												 stroke-linecap="round" stroke-linejoin="round" class="icon">
												<polyline points="9 18 15 12 9 6"></polyline>
											</svg>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modalTitle"></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					</button>
				</div>
				<div class="modal-body">
					<div class="mb-3">
						<label class="form-label">标题</label>
						<p class="tracking-wide">ElasticSearch</p>
					</div>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-lg-4">
							<div class="mb-3">
								<p class="tracking-wide">浏览数：<mark id="viewNum"></mark></p>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="mb-3">
								<p class="tracking-wide">点赞数：<mark id="thumbUp"></mark></p>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="mb-3">
								<p class="tracking-wide">收藏数：<mark id="collectNum"></mark></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
	function showDetail(ele) {
		let viewNum = $(ele).attr("viewNum");
		let thumbUp = $(ele).attr("thumbUp");
		let collectNum = $(ele).attr("collectNum");
		$("#viewNum").text(viewNum);
		$("#thumbUp").text(thumbUp);
		$("#collectNum").text(collectNum);
		$("#modal-report").modal("show");
	}
	function changeState(ele) {
		$.ajax({
			type: "post",
			url: "/admin/article/state",
			data: {
				"articleId": $(ele).attr("articleId"),
				"state": "1"
			},
			success: function (data) {
				if (data.code == 200) {
					$("#alert-success").fadeIn();
					setTimeout(function() {
						$("#alert-success").fadeOut();
						window.location.reload();
					}, 1000);


				} else {
					$("#alert-fail").fadeIn();
					setTimeout(function () {
						$("#alert-fail").fadeOut();
					}, 800);
				}
			},
			error: function (data) {
				$("#alert-fail").fadeIn();
			}
		})
	}
</script>
</body>
</html>
